<template>
  <div class="shallow">
    <div style="color: red">
      1.shallowRef 和 shallowReactive
      <p>
        绕开深度响应,浅层式api创建的状态只在其顶层是响应式的，对所有深层的对象不做任何处理，避免对每一个内部属性做响应式带来的性能成本，可以提高性能
      </p>
    </div>
    <div>姓名:{{ person.name }} 年龄:{{ person.age }}</div>
    <div>钱:{{ monty }}w</div>
    <div>玩具:{{ person.toy.name }}</div>

    <button @click="changeName">修改名称</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeMoney">修改金钱</button>
    <button @click="changeToy">修改玩具</button>
    <br />

    <div style="color: red">2.readconly与shallowReadonly</div>
    <p>
      readonly限制所有为只读,shallowReadonly只限制浅层数据为只读 作用：保护数据
    </p>
    <p>
      用于创建一个对象的深只读副本，创建不可变的状态快照，保护全局状态或配置不被修改
    </p>

    <p>猫1:{{ obj.cat }}</p>
    <p>猫1:{{ readonlyCopy.cat }}</p>
    <button @click="changeCat">修改猫1</button>
    <button @click="changeCat2">修改猫2</button>
    <br />

    <div style="color: red">3.toRaw与markRaw</div>
    <p>toRaw将响应式数据转换为原始数据，也就是普通对象 const raw=toRaw(obj)</p>
    <p>markRaw：标记一个对象，使其永远不会变成响应式</p>
    <br />
    <div style="color: red">4.customRef 主要是track 跟踪和trigger 触发</div>
    <div>需求：输入信息1秒后才变</div>
    <div>{{ msg }}</div>
    <input type="text" v-model="msg" />
    <br />
    <div style="color: red">5.teleport标签 传送门 teleport to='body'</div>

    <button @click="isShow = true">显示隐藏弹窗</button>
    <teleport to="body">
      <div class="modelMask" v-if="isShow">
        <div class="model">
          <p>内容</p>
          <button @click="isShow = false">关闭</button>
        </div>
      </div>
    </teleport>

    <br />
    <div style="color: red">6.suspense</div>
    <p>
      如果
      子组件中有异步请求，需要等待请求返回后才会渲染页面，可以使用suspense达到loading的效果，
      template v-slot：default 和 template v-slot:fallback 加载中...
    </p>
    <br />

    <div style="color: red">7.全局API</div>
    <p>1.app.component 全局组件 app.component("Hello", Hello);</p>
    <Hello />
    <p>1.app.directive 全局指令</p>
    <div v-beauty="str">22</div>
  </div>
</template>

<script setup lang="ts" name="shallow">
import { shallowReactive, readonly, shallowRef, reactive, ref } from "vue";
import { getMsg } from "./hooks/useMsg";
const isShow = ref(false);
const person = shallowReactive({
  name: "s",
  age: 45,
  toy: {
    name: "机车",
  },
});
const str = ref("4452");
const { msg } = getMsg("我爱你", 1000);
const obj = reactive({
  car: "宝马",
  cat: "蓝猫",
});
const readonlyCopy = readonly(obj);

const changeCat = () => {
  obj.cat = "小猫";
};

const changeCat2 = () => {
  // readonlyCopy.cat = "小猫";//只读模式
};

const monty = shallowRef(5520);
const changeName = () => {
  person.name = "45";
};
const changeAge = () => {
  person.age = 456;
};
const changeMoney = () => {
  monty.value = 5465;
};

const changeToy = () => {
  person.toy.name = "沙鸥及";
};
</script>

<style scoped lang="scss">
.modelMask {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
  .model {
    width: 200px;
    height: 200px;
    background-color: pink;
  }
}
</style>
